.topic-item {
    padding        : 20px;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    border-bottom  : 1PX solid #f0f0f0;

    &:hover {
        background: #f5f5f5;
    }

    .avatar {
        width        : 30PX;
        height       : 30PX;
        margin-right : 20PX;
        flex         : 1;
        border-radius: 50%;
    }

    .item-right {
        display       : flex;
        flex-direction: column;
        flex          : 10;
        font-size     : 16PX;
        color         : #333;

        .title {
            font-weight: bold;
        }

        .item-tag {
            font-size     : 14PX;
            line-height   : 1;
            padding       : 5PX 10PX;
            vertical-align: middle;
            margin-right  : 10PX;
            color         : #fff;
            display       : inline-block;
            width         : auto;
            border        : none;

            &.top {
                background: #52c41a;
            }

            &.good {
                background: #1890ff;
            }

            &.ask {
                background: #faad14;
            }

            &.share {
                background: #e5e5e5;
            }

            &.job {
                background: #f5222d;
            }
        }

        .item-desc {
            display        : flex;
            flex-direction : row;
            justify-content: space-between;
            color          : #666;
            font-size      : 14PX;
            margin-top     : 10PX;
        }
    }
}